@font-face {
	font-family: electroincFont;
	src: url("../font/DS-DIGIT.TTF");
}

// css初始化
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background: url("../images/bg.jpg") no-repeat top center;
	line-height: 1.15;
	background-size: 100% 100%;
}

// 头部设置
header {
	height: 1.25rem;
	background: url("../images/head_bg.png") no-repeat;
	background-size: 100% 100%;

	h1 {
		font-size: 0.5rem;
		color: #FFFFFF;
		text-align: center;
		line-height: 1rem;
	}

	.showTime {
		position: absolute;
		top: 0.125rem;
		right: 0.25rem;
		line-height: 1rem;
		color: rgba(255, 255, 255, 0.5);
		font-size: 0.25rem;
		font-family: electroincFont;
	}
}

// 页面主体盒子
.mainBox {
	display: flex;
	min-width: 1024px;
	max-width: 1920px;
	margin: 0 auto;
	padding: 0.125rem 0.125rem 0;

	.column {
		flex: 3;

		&:nth-child(2) {
			flex: 5;
			margin: 0.125rem 0.125rem 0;
		}

		.panel {
			position: relative;
			height: 3.875rem;
			border: 1px solid rgba(25, 186, 139, 0.17);
			background: url("../images/line.png") rgba(255, 255, 255, 0.05);
			padding: 0 0.1875rem 0.5rem;
			margin-bottom: 0.1875rem;

			&::before {
				position: absolute;
				top: 0;
				left: 0;
				width: 10px;
				height: 10px;
				border-left: 2px solid #02A6B5;
				border-top: 2px solid #02A6B5;
				content: "";
			}

			&::after {
				position: absolute;
				top: 0;
				right: 0;
				width: 10px;
				height: 10px;
				border-right: 2px solid #02A6B5;
				border-top: 2px solid #02A6B5;
				content: "";
			}

			.panelFooter {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;

				&::before {
					position: absolute;
					bottom: 0;
					left: 0;
					width: 10px;
					height: 10px;
					border-left: 2px solid #02A6B5;
					border-bottom: 2px solid #02A6B5;
					content: "";
				}

				&::after {
					position: absolute;
					bottom: 0;
					right: 0;
					width: 10px;
					height: 10px;
					border-right: 2px solid #02A6B5;
					border-bottom: 2px solid #02A6B5;
					content: "";
				}
			}

			h2 {
				height: 0.6rem;
				color: #FFFFFF;
				line-height: 0.6rem;
				text-align: center;
				font-size: 0.25rem;

				.mySelect {
					height: 0.3rem;
					line-height: 0.3rem;
					font-size: 0.25rem;
					text-align: center;
					margin-left: 20px;
					color: #FFFFFF;
					background-color: transparent;
					border-radius: 5px;

					option {
						background-color: #032C9D;
					}
				}
			}

			.chart {
				height: 3rem;
			}
		}
	}

	.no {
		background-color: rgba(255, 255, 255, 0.05);
		padding: 0.1875rem;

		.noHd {
			border: 1px solid rgba(25, 186, 139, 0.17);
			position: relative;

			&::before {
				position: absolute;
				top: 0;
				left: 0;
				content: "";
				width: 30px;
				height: 10px;
				border-top: 2px solid #02A6B5;
				border-left: 2px solid #02A6B5;
			}

			&::after {
				position: absolute;
				bottom: 0;
				right: 0;
				content: "";
				width: 30px;
				height: 10px;
				border-bottom: 2px solid #02A6B5;
				border-right: 2px solid #02A6B5;
			}

			ul {
				display: flex;

				li {
					flex: 1;
					position: relative;
					line-height: 1rem;
					font-size: 0.875rem;
					color: #FFEB7B;
					text-align: center;
					list-style: none;
					font-family: electroincFont, serif;

					&::after {
						position: absolute;
						content: '';
						top: 25%;
						right: 0;
						height: 50%;
						width: 2px;
						background-color: rgba(255, 255, 255, 0.1);
					}
				}
			}
		}

		.noBd {
			ul {
				display: flex;

				li {
					flex: 1;
					text-align: center;
					color: rgba(255, 255, 255, 0.7);
					font-size: 0.225rem;
					height: 0.5rem;
					line-height: 0.5rem;
					padding-top: 0.125rem;
					list-style: none;
				}
			}
		}
	}

	.map {
		height: 10.125rem;
		position: relative;

		.map1 {
			width: 6.475rem;
			height: 6.475rem;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background-image: url("../images/map.png");
			background-size: 100% 100%;
			opacity: 0.5;
		}

		.map2 {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 8.0375rem;
			height: 8.0375rem;
			background-image: url("../images/lbx.png");
			background-size: 100% 100%;
			opacity: 0.4;
			animation: rotate1 30s linear infinite;
		}

		.map3 {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 7.075rem;
			height: 7.075rem;
			background-image: url("../images/jt.png");
			background-size: 100% 100%;
			opacity: 0.4;
			animation: rotate2 30s linear infinite;
		}

		@keyframes rotate1 {
			from {
				transform: translate(-50%, -50%) rotate(0deg);
			}

			to {
				transform: translate(-50%, -50%) rotate(360deg);
			}
		}

		@keyframes rotate2 {
			from {
				transform: translate(-50%, -50%) rotate(360deg);
			}

			to {
				transform: translate(-50%, -50%) rotate(0deg);
			}
		}

		.chart {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 10.125rem;
		}
	}
}
